﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>地图界面</title>
    <link rel="stylesheet" href="js/bstable/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">

    <script src="js/jquery/jQuery-2.2.0.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
    <script src="js/map_control.js"></script>
    <script src="js/ztree/jquery.ztree.all-3.5.js"></script>
</head>

<body>
    <!--顶部-->
    <header class="header left">
        <div class="left nav">
            <ul>
                <li><i class="nav_1"></i><a href="index.html">全省概览</a> </li>
                <li><i class="nav_2"></i><a href="carContrl.html">各市统计</a> </li>
                <li class="nav_active"><i class="nav_3"></i><a href="map.html">地图界面</a> </li>
            </ul>
        </div>
        <div class="header_center left">
            <h2><strong>城市数据可视化平台</strong></h2>
            <p class="color_font"><small>Urban data visualization platform</small></p>
        </div>
        <div class="right nav text_right">
            <div id="time" style="font-size: 3vh;margin: 5% 6% 0 0; color:#eeecece0; float: right;"></div>

        </div>
    </header>

    <!--内容部分-->
    <div class="map_con left" id="car_control">

        <!--左侧地图-->
        <div class="left map_left">
            <div class="map_box" id="map_box"></div>
            <!-- <div class="map_top">
                <ul>
                    <li class="active"><i class="glyphicon glyphicon-pencil"></i><a href="javascript:void (0)"
                            class="active">图层选择</a> </li>
                    <li><i class="glyphicon glyphicon-zoom-in"></i><a href="javascript:void (0)">缩小</a> </li>
                    <li><i class="glyphicon glyphicon-zoom-out"></i><a href="javascript:void (0)">放大</a> </li>
                    <li><i class="glyphicon glyphicon-screenshot"></i><a href="javascript:void (0)">对比</a> </li>
                    <li><i class="glyphicon glyphicon-search"></i><a href="javascript:void (0)">搜索</a> </li> 
                    <li><i class="glyphicon glyphicon-wrench"></i><a href="javascript:void (0)">工具</a> </li>
                    <li><i class="glyphicon glyphicon-fullscreen"></i><a href="">全屏</a> </li>
                </ul>
            </div> -->

            <!-- <div class="map_select">
                <p><input type="checkbox"><span>人口数量</span></p>
                <p><input type="checkbox"><span>消费水平</span></p>
                <p><input type="checkbox"><span>AQI达标率</span></p>
                <p><input type="checkbox"><span>生产总值</span></p>
            </div> -->

        </div>

        <!--右侧功能栏-->
        <div class="right map_right ">

            <div class="map_right_top">
                <ul>
                    <li class="li_active">常住人口</li>
                    <li>生产总值</li>
                    <li>可支配收入</li>
                </ul>
            </div>

            <div class="map_con">

                <div class="map_con_div" style="display: block">
                    <div class="div_any_child" style="height: 600px">
                        <div class="table_p table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>年份</th>
                                        <th>城市</th>
                                        <th style="font-size: 14px;">数量(万人)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="map_con_div">
                    <div class="div_any_child" style="height: 600px">
                        <div class="table_p scrollable-table">
                            <table>
                                <thead>
                                    <tr>
                                        <th>年份</th>
                                        <th>城市</th>
                                        <th style="font-size: 14px;">生产总值(亿元)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="map_con_div">
                    <div class="div_any_child" style="height: 600px">
                        <div class="table_p table-container1">
                            <table>
                                <thead>
                                    <tr>
                                        <th>年份</th>
                                        <th>城市</th>
                                        <th style="font-size: 14px;">人均收入(元)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</body>

</html>